window.addEventListener('load', function () {
    const $ = document.querySelector.bind(document);
    const $$ = (selector) => Array.from(document.querySelectorAll(selector));


    function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
                if (callback) {
                    callback();
                }
                // callback&&callback();
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 15);
    }

    let allarr = [];

    let ban_array = 0;
    let alllength = 0;
    let originnum = 0;
    let rightlen = 0;
    let circlenum = 0;

    axios({
        url: 'http://43.139.230.42:8001/slider'
    }).then(response => {
        ban_array = response.data.data;
        // ban_array.push({
        //     "id": 1,
        //     "title": "产品经理实战高薪课",
        //     "brief": "全方位技能提升，职业生涯无短板",
        //     "brightPoints": [
        //         "对标腾讯10+职级能力",
        //         "专注提升高阶产品人业务能力",
        //         "从理论到实战，完成职业蜕变",
        //         "7大阶段体系进阶 成就高级产品人"
        //     ],
        //     "pcLargeImage": "https://s0.lgstatic.com/i/image/M00/8E/EC/CgqCHmAGQgiAfqskAAClyQVZEpw724.png"
        // })
        // ban_array.push({
        //     "id": 1,
        //     "title": "产品经理实战高薪课",
        //     "brief": "全方位技能提升，职业生涯无短板",
        //     "brightPoints": [
        //         "对标腾讯10+职级能力",
        //         "专注提升高阶产品人业务能力",
        //         "从理论到实战，完成职业蜕变",
        //         "7大阶段体系进阶 成就高级产品人"
        //     ],
        //     "pcLargeImage": "https://s0.lgstatic.com/i/image/M00/8E/EC/CgqCHmAGQgiAfqskAAClyQVZEpw724.png"
        // })
        

        circlenum = Math.ceil((alllength - 2) / 3) + 1;

        console.log(ban_array);
        alllength = Math.floor((ban_array.length + 2) / 2);
        rightlen = alllength - 2;

        console.log(alllength);
        if (ban_array.length >= 1) {
            if (ban_array.length >= 4 && ban_array.length <= 5) {
                let str1 = `<div class="first arr opacity-right" style="background-image:url(${ban_array[0].pcLargeImage});">
                    <div class="title">${ban_array[0].title}</div>
                    <div class="brief">${ban_array[0].brief}</div>
                    <div class="brightPoints">
                        <div>${ban_array[0].brightPoints[0]}</div>
                        <div>${ban_array[0].brightPoints[1]}</div>
                        <div>${ban_array[0].brightPoints[2]}</div>
                        <div>${ban_array[0].brightPoints[3]}</div>
                    </div>
                    </div>`
                $('.mid-body').insertAdjacentHTML('beforeend', str1);

                for (let i = 1; i < ban_array.length;) {
                    if ((ban_array.length - i) > 1) {
                        let str2 = `<div class="other arr opacity-right">
                    <div style="background-image:url(${ban_array[i].pcLargeImage});">
                        <div class="title">${ban_array[i].title}</div>
                        <div class="brief">${ban_array[i].brief}</div>
                    </div>
                    <div style="background-image:url(${ban_array[i + 1].pcLargeImage});">
                        <div class="title">${ban_array[i + 1].title}</div>
                        <div class="brief">${ban_array[i + 1].brief}</div>
                    </div>
                    </div>`
                        $('.mid-body').insertAdjacentHTML('beforeend', str2);
                        i += 2;
                    } else {
                        let str2 = `<div class="other arr opacity-right">
                    <div style="background-image:url(${ban_array[i].pcLargeImage});>
                        <div class="title">${ban_array[i].title}</div>
                        <div class="brief">${ban_array[i].brief}</div>
                    </div>
                    </div>`
                        $('.mid-body').insertAdjacentHTML('beforeend', str2);
                        i++;
                    }
                }

                let str2 = `<div class="first arr checked style="background-image:url(${ban_array[0].pcLargeImage});"">
                    <div class="title">${ban_array[0].title}</div>
                    <div class="brief">${ban_array[0].brief}</div>
                    <div class="brightPoints">
                        <div>${ban_array[0].brightPoints[0]}</div>
                        <div>${ban_array[0].brightPoints[1]}</div>
                        <div>${ban_array[0].brightPoints[2]}</div>
                        <div>${ban_array[0].brightPoints[3]}</div>
                    </div>
                    </div>`
                $('.mid-body').insertAdjacentHTML('beforeend', str2);

                for (let i = 1; i < ban_array.length;) {
                    if ((ban_array.length - i) > 1) {
                        let str2 = `<div class="other arr ${i == 1 ? 'checked' : 'opacity-left'}">
                    <div style="background-image:url(${ban_array[i].pcLargeImage});">
                        <div class="title">${ban_array[i].title}</div>
                        <div class="brief">${ban_array[i].brief}</div>
                    </div>
                    <div style="background-image:url(${ban_array[i + 1].pcLargeImage});">
                        <div class="title">${ban_array[i + 1].title}</div>
                        <div class="brief">${ban_array[i + 1].brief}</div>
                    </div>
                    </div>`
                        $('.mid-body').insertAdjacentHTML('beforeend', str2);
                        i += 2;
                    } else {
                        let str2 = `<div class="other arr ${i == 1 ? 'checked' : 'opacity-left'}">
                    <div style="background-image:url(${ban_array[i].pcLargeImage});>
                        <div class="title">${ban_array[i].title}</div>
                        <div class="brief">${ban_array[i].brief}</div>
                    </div>
                    </div>`
                        $('.mid-body').insertAdjacentHTML('beforeend', str2);
                        i++;
                    }
                }

                let str3 = `<div class="first arr opacity-left style="background-image:url(${ban_array[0].pcLargeImage});"">
                    <div class="title">${ban_array[0].title}</div>
                    <div class="brief">${ban_array[0].brief}</div>
                    <div class="brightPoints">
                        <div>${ban_array[0].brightPoints[0]}</div>
                        <div>${ban_array[0].brightPoints[1]}</div>
                        <div>${ban_array[0].brightPoints[2]}</div>
                        <div>${ban_array[0].brightPoints[3]}</div>
                    </div>
                    </div>`
                $('.mid-body').insertAdjacentHTML('beforeend', str3);

                for (let i = 1; i < ban_array.length;) {
                    if ((ban_array.length - i) > 1) {
                        let str2 = `<div class="other arr opacity-left">
                    <div style="background-image:url(${ban_array[i].pcLargeImage});">
                        <div class="title">${ban_array[i].title}</div>
                        <div class="brief">${ban_array[i].brief}</div>
                    </div>
                    <div style="background-image:url(${ban_array[i + 1].pcLargeImage});">
                        <div class="title">${ban_array[i + 1].title}</div>
                        <div class="brief">${ban_array[i + 1].brief}</div>
                    </div>
                    </div>`
                        $('.mid-body').insertAdjacentHTML('beforeend', str2);
                        i += 2;
                    } else {
                        let str2 = `<div class="other arr opacity-left">
                    <div style="background-image:url(${ban_array[i].pcLargeImage});>
                        <div class="title">${ban_array[i].title}</div>
                        <div class="brief">${ban_array[i].brief}</div>
                    </div>
                    </div>`
                        $('.mid-body').insertAdjacentHTML('beforeend', str2);
                        i++;
                    }
                }
                left();
                right();

            } else if (ban_array.length > 5) {
                let str1 = `<div class="first arr checked" style="background-image:url(${ban_array[0].pcLargeImage});">
                    <div class="title">${ban_array[0].title}</div>
                    <div class="brief">${ban_array[0].brief}</div>
                    <div class="brightPoints">
                        <div>${ban_array[0].brightPoints[0]}</div>
                        <div>${ban_array[0].brightPoints[1]}</div>
                        <div>${ban_array[0].brightPoints[2]}</div>
                        <div>${ban_array[0].brightPoints[3]}</div>
                    </div>
                    </div>`
                $('.mid-body').insertAdjacentHTML('beforeend', str1);

                for (let i = 1; i < ban_array.length;) {
                    if ((ban_array.length - i) > 1) {
                        let str2 = `<div class="other arr ${i == 1 ? 'checked' : 'opacity-left'}">
                    <div style="background-image:url(${ban_array[i].pcLargeImage});">
                        <div class="title">${ban_array[i].title}</div>
                        <div class="brief">${ban_array[i].brief}</div>
                    </div>
                    <div style="background-image:url(${ban_array[i + 1].pcLargeImage});">
                        <div class="title">${ban_array[i + 1].title}</div>
                        <div class="brief">${ban_array[i + 1].brief}</div>
                    </div>
                    </div>`
                        $('.mid-body').insertAdjacentHTML('beforeend', str2);
                        i += 2;
                    } else {
                        let str2 = `<div class="other arr ${i == 1 ? 'checked' : 'opacity-left'}">
                    <div style="background-image:url(${ban_array[i].pcLargeImage});">
                        <div class="title">${ban_array[i].title}</div>
                        <div class="brief">${ban_array[i].brief}</div>
                    </div>
                    </div>`
                        $('.mid-body').insertAdjacentHTML('beforeend', str2);
                        i++;
                    }
                }

                let str2 = `<div class="first arr opacity-left style="background-image:url(${ban_array[0].pcLargeImage});"">
                    <div class="title">${ban_array[0].title}</div>
                    <div class="brief">${ban_array[0].brief}</div>
                    <div class="brightPoints">
                        <div>${ban_array[0].brightPoints[0]}</div>
                        <div>${ban_array[0].brightPoints[1]}</div>
                        <div>${ban_array[0].brightPoints[2]}</div>
                        <div>${ban_array[0].brightPoints[3]}</div>
                    </div>
                    </div>`
                $('.mid-body').insertAdjacentHTML('beforeend', str2);

                for (let i = 1; i < 5;) {
                    let str2 = `<div class="other arr opacity-left">
                    <div style="background-image:url(${ban_array[i].pcLargeImage});">
                        <div class="title">${ban_array[i].title}</div>
                        <div class="brief">${ban_array[i].brief}</div>
                    </div>
                    <div style="background-image:url(${ban_array[i + 1].pcLargeImage});">
                        <div class="title">${ban_array[i + 1].title}</div>
                        <div class="brief">${ban_array[i + 1].brief}</div>
                    </div>
                    </div>`
                    $('.mid-body').insertAdjacentHTML('beforeend', str2);
                    i += 2;
                }


                let arrall = $$('.arr');
                for (let i = 1; i < 5; i++) {
                    let cloneele = arrall[alllength - i].cloneNode(true);
                    cloneele.classList.remove('checked');
                    cloneele.classList.remove('opacity-left');
                    cloneele.classList.add('opacity-right');
                    $('.mid-body').insertAdjacentHTML('afterbegin', cloneele.outerHTML);

                }

                moreright();
                maoreleft();
            } else {
                if (ban_array[0]) {
                    let str1 = `<div class="first arr opacity-right" style="background-image:url(${ban_array[0].pcLargeImage});">
                    <div class="title">${ban_array[0].title}</div>
                    <div class="brief">${ban_array[0].brief}</div>
                    <div class="brightPoints">
                        <div>${ban_array[0].brightPoints[0]}</div>
                        <div>${ban_array[0].brightPoints[1]}</div>
                        <div>${ban_array[0].brightPoints[2]}</div>
                        <div>${ban_array[0].brightPoints[3]}</div>
                    </div>
                    </div>`
                    $('.mid-body').insertAdjacentHTML('beforeend', str1);
                }

                for (let i = 1; i < ban_array.length;) {
                    if ((ban_array.length - i) > 1) {
                        let str2 = `<div class="other arr opacity-right">
                    <div style="background-image:url(${ban_array[i].pcLargeImage});">
                        <div class="title">${ban_array[i].title}</div>
                        <div class="brief">${ban_array[i].brief}</div>
                    </div>
                    <div style="background-image:url(${ban_array[i + 1].pcLargeImage});">
                        <div class="title">${ban_array[i + 1].title}</div>
                        <div class="brief">${ban_array[i + 1].brief}</div>
                    </div>
                    </div>`
                        $('.mid-body').insertAdjacentHTML('beforeend', str2);
                        i += 2;
                    } else {
                        let str2 = `<div class="other arr opacity-right">
                    <div style="background-image:url(${ban_array[i].pcLargeImage});>
                        <div class="title">${ban_array[i].title}</div>
                        <div class="brief">${ban_array[i].brief}</div>
                    </div>
                    </div>`
                        $('.mid-body').insertAdjacentHTML('beforeend', str2);
                        i++;
                    }
                }
            }



            let widthnum = 0;
            $$('.opacity-right').forEach(function (value, index, array) {
                widthnum += value.offsetWidth;
            })
            if (ban_array.length >= 4 && ban_array.length <= 5){
                $('.mid-body').style.left = -(widthnum - 32) + 'px';
                originnum = -(widthnum -32);
            }else {
                $('.mid-body').style.left = -(widthnum - 20) + 'px';
                originnum = -(widthnum -20);
            }
            
            console.log($('.mid-body').style.left);

            


            let midlong = 0;
            $$('.arr').forEach(function (value, index, array) {
                midlong += value.offsetWidth + 16;
            })
            $('.mid-body').style.width = midlong + 'px';

            allarr = $$('.arr');
        }

    })



    function right() {
        let throttleActive = false;
        $('.right').addEventListener('click', function () {
            if (!throttleActive) {
                throttleActive = true;
                let middleWidth = $('.mid-body').offsetLeft;

                if (rightlen <= 0) {
                    allarr.forEach(function (value) {
                        value.classList.remove('checked');
                    })
                    allarr[5].className = 'other arr opacity-right';
                    allarr[6].className = 'first arr checked';
                    allarr[7].className = 'other arr checked';
                    allarr[3].className = 'first arr checked';
                    allarr[4].className = 'other arr checked';

                    animate($('.mid-body'), -1149 + middleWidth, function () {

                        allarr[5].className = 'other arr opacity-left';
                        allarr[6].className = 'first arr opacity-left';
                        allarr[7].className = 'other arr opacity-left';

                        $('.mid-body').style.left = originnum + 'px';

                        throttleActive = false;
                        rightlen = alllength - 2;
                    });

                } else {
                    animate($('.mid-body'), -383 + middleWidth, function () {
                        throttleActive = false;
                    });
                    allarr.forEach(function (value) {
                        value.classList.remove('checked');
                    })
                    allarr[4].className = 'other arr checked';
                    allarr[5].className = 'other arr checked';
                    allarr[3].className = 'first arr opacity-right';
                    rightlen -= 1;
                }
            }
        })
    }


    function moreright() {
        let throttleActive = false;
        $('.right').addEventListener('click', function () {
            if (!throttleActive) {
                throttleActive = true;
                let middleWidth = $('.mid-body').offsetLeft;

                if (rightlen <= 0) {
                    allarr.forEach(function (value) {
                        value.classList.remove('checked');
                    })

                    allarr[alllength + 4 - 1].className = 'other arr opacity-right';


                    allarr[alllength + 4].className = 'first arr checked';
                    allarr[alllength + 4 + 1].className = 'other arr checked';


                    allarr[4].className = 'first arr checked';
                    allarr[5].className = 'other arr checked';




                    animate($('.mid-body'), -1149 + middleWidth, function () {
                        for (let i = 0; i < alllength + 7; i++) {
                            if (i < 4) {
                                allarr[i].classList.remove('opacity-left');
                                allarr[i].classList.add('opacity-right');
                            } else if (i > 5) {
                                allarr[i].classList.remove('opacity-right');
                                allarr[i].classList.add('opacity-left');
                            }
                        }

                        $('.mid-body').style.left = originnum + 'px';

                        throttleActive = false;
                        rightlen = alllength - 2;
                    });



                }

                if (rightlen >= 3) {
                    console.log(3);
                    animate($('.mid-body'), -1149 + middleWidth, function () {
                        throttleActive = false;
                    });
                    allarr.forEach(function (value) {
                        value.classList.remove('checked');
                    })
                    allarr[alllength + 4 - rightlen].className = 'other arr checked';
                    allarr[alllength + 4 - rightlen + 1].className = 'other arr checked';
                    allarr[alllength + 4 - rightlen + 2].className = 'other arr checked';
                    allarr[alllength + 4 - rightlen - 1].className = 'other arr opacity-right';

                    rightlen -= 3;
                } else if (rightlen == 2) {
                    console.log(2);
                    animate($('.mid-body'), -766 + middleWidth, function () {
                        throttleActive = false;
                    });
                    allarr.forEach(function (value) {
                        value.classList.remove('checked');
                    })
                    allarr[alllength + 4 - rightlen - 1].className = 'other arr checked';
                    allarr[alllength + 4 - rightlen].className = 'other arr checked';
                    allarr[alllength + 4 - rightlen + 1].className = 'other arr checked';
                    allarr[alllength + 4 - rightlen - 2].classList.add('opacity-right');
                    console.log($('.mid-body').style.left);

                    rightlen -= 2;
                } else if (rightlen == 1) {
                    console.log(1);
                    animate($('.mid-body'), -383 + middleWidth, function () {
                        throttleActive = false;
                    });
                    allarr[alllength + 4 - rightlen].className = 'other arr checked';
                    allarr[alllength + 4 - rightlen - 3].className = 'other arr opacity-right';
                    rightlen -= 1;
                }

            }


        })
    }


    function left() {
        let throttleActive = false;
        $('.left').addEventListener('click', function () {
            if (!throttleActive) {
                throttleActive = true;
                let middleWidth = $('.mid-body').offsetLeft;

                if (rightlen == alllength - 2) {
                    allarr.forEach(function (value) {
                        value.classList.remove('checked');
                    })
                    allarr[3].className = 'first arr opacity-left';
                    allarr[0].className = 'first arr opacity-right';
                    allarr[1].className = 'other arr checked opacity-right';
                    allarr[2].className = 'other arr checked opacity-right';

                    allarr[4].className = 'other arr checked';
                    allarr[5].className = 'other arr checked';


                    animate($('.mid-body'), 1149 + middleWidth, function () {
                        allarr[3].className = 'first arr opacity-right';
                        $('.mid-body').style.left = originnum - 383 + 'px';

                        throttleActive = false;
                        rightlen = 0;
                    });
                } else {
                    animate($('.mid-body'), 383 + middleWidth, function () {
                        throttleActive = false;
                    });
                    allarr.forEach(function (value) {
                        value.classList.remove('checked');
                    })
                    allarr[3].className = 'first arr checked';
                    allarr[4].className = 'other arr checked';
                    allarr[5].className = 'other arr opacity-left';
                    allarr[1].className = 'other arr opacity-right';
                    allarr[2].className = 'other arr opacity-right';

                    rightlen = alllength - 2;
                }
            }
        })
    }


    function maoreleft() {
        let throttleActive = false;
        $('.left').addEventListener('click', function () {
            if (!throttleActive) {
                throttleActive = true;
                let middleWidth = $('.mid-body').offsetLeft;


                if (rightlen == alllength - 2) {
                    console.log(0);
                    allarr.forEach(function (value) {
                        value.classList.remove('checked');
                    })
                    allarr[alllength].className = 'other arr opacity-right';

                    //4ge

                    allarr[4].className = 'first arr opacity-left';

                    allarr[1].className = 'other arr checked';
                    allarr[2].className = 'other arr checked';
                    allarr[3].className = 'other arr checked';



                    allarr[alllength + 4 - 1].className = 'other arr checked';
                    allarr[alllength + 4 - 2].className = 'other arr checked';
                    allarr[alllength + 4 - 3].className = 'other arr checked';

                    //5ge 
                    allarr[5].classList.add('opacity-right');


                    animate($('.mid-body'), 1149 + middleWidth, function () {
                        allarr[4].className = 'first arr opacity-right';

                        if (alllength == 4) {
                            $('.mid-body').style.left = - (383 * (alllength + 4 - 1)) + 84 + 'px';
                        } else {
                            $('.mid-body').style.left = - (383 * (alllength + 4 - 2)) + 84 + 'px';
                        }

                        throttleActive = false;
                        rightlen = 0;
                    });
                } else if (alllength - 3 - 2 - rightlen == 1 && alllength != 4) {
                    console.log(1);
                    animate($('.mid-body'), 383 + middleWidth, function () {
                        throttleActive = false;
                    });
                    allarr.forEach(function (value) {
                        value.classList.remove('checked');
                    })
                    allarr[6].className = 'other arr checked';
                    allarr[7].className = 'other arr checked';
                    allarr[8].className = 'other arr checked';
                    allarr[9].className = 'other arr opacity-left';
                    rightlen += 1;
                } else if (alllength - 3 - 2 - rightlen == 2 && alllength != 4) {
                    console.log(2);
                    animate($('.mid-body'), 766 + middleWidth, function () {
                        throttleActive = false;
                    });
                    allarr.forEach(function (value) {
                        value.classList.remove('checked');
                    })
                    allarr[6].className = 'other arr checked';
                    allarr[7].className = 'other arr checked';
                    allarr[8].className = 'other arr checked';
                    allarr[9].className = 'other arr opacity-left';
                    rightlen += 2;
                } else if (rightlen >= 0 && alllength != 4) {
                    // console.log(3);
                    animate($('.mid-body'), 1149 + middleWidth, function () {
                        throttleActive = false;
                    });
                    allarr.forEach(function (value) {
                        value.classList.remove('checked');
                    })
                    console.log(alllength);
                    allarr[alllength - rightlen + 4 - 3].className = 'other arr opacity-left';
                    allarr[alllength - rightlen - 3].className = 'other arr opacity-right';
                    if (rightlen != alllength - 2 - 3) {
                        allarr[alllength - rightlen].className = 'other arr checked';
                        allarr[alllength - rightlen - 1].className = 'other arr checked';
                        allarr[alllength - rightlen - 2].className = 'other arr checked';
                    } else {
                        allarr[4].className = 'first arr checked';
                        allarr[5].className = 'other arr checked';
                        for (let i = 0; i < alllength + 7; i++) {
                            if (i < 4) {
                                allarr[i].classList.remove('opacity-left');
                                allarr[i].classList.add('opacity-right');
                            } else if (i > 5) {
                                allarr[i].classList.remove('opacity-right');
                                allarr[i].classList.add('opacity-left');
                            }
                        }
                    }
                    rightlen += 3;
                } else if (alllength == 4) {
                    animate($('.mid-body'), 766 + middleWidth, function () {
                        throttleActive = false;
                    });
                    allarr.forEach(function (value) {
                        value.classList.remove('checked');
                    })
                    allarr[4].className = 'first arr checked';
                    allarr[5].className = 'other arr checked';
                    for (let i = 0; i < alllength + 7; i++) {
                        if (i < 4) {
                            allarr[i].classList.remove('opacity-left');
                            allarr[i].classList.add('opacity-right');
                        } else if (i > 5) {
                            allarr[i].classList.remove('opacity-right');
                            allarr[i].classList.add('opacity-left');
                        }
                    }
                    rightlen += 2;
                }
            }
        })
    }



    //小圆圈
    function circle() {
        for (i = 0; i < circlenum; i++) {
            let str = `<li></li>`;
            $('.caro-cle-b').insertAdjacentHTML('beforeend', str);
        }
    }


})




// // 默认参数
// window.addEventListener('load', function () {
//     const DEFAULTS = {
//         // 初始索引
//         initialIndex: 0,
//         // 切换时是否有动画
//         animation: true,
//         // 切换速度，单位 ms
//         speed: 500,
//         // 自动切换，单位 ms
//         autoplay: 0,
//     };

//     // base
//     const ELEMENT_NODE_TYPE = 1;
//     const SLIDER_ANIMATION_CLASS_NAME = 'slider-animation';

//     class BaseSlider {
//         constructor(el, options) {
//             if (el.nodeType !== ELEMENT_NODE_TYPE) {
//                 throw new Errow("请传入DOM元素 亲");
//             }
//             //实际参数
//             this.options = {
//                 ...DEFAULTS,
//                 ...options,
//             };

//             const sliderEl = el;
//             const sliderContentEl = sliderEl.querySelector(".mid-body");
//             const sliderItemEls = sliderContentEl.querySelectorAll(".arr");

//             // 添加到 this 上，为了在方法中使用
//             this.sliderEl = sliderEl;
//             this.sliderContentEl = sliderContentEl;
//             this.sliderItemEls = sliderItemEls;

//             this.minIndex = 0;
//             this.maxIndex = sliderItemEls.length - 1;
//             this.currIndex = this.getCorrectedIndex(this.options.initialIndex);

//             // 每个 slider-item 的宽度（每次移动的距离）
//             this.itemWidth = sliderItemEls[0].offsetWidth;

//             this.init();
//         }

//         // 初始化
//         init() {
//             // 为每个 slider-item 设置宽度
//             this.setItemsWidth();

//             // 为 slider-content 设置宽度
//             this.setContentWidth();

//             // 切换到初始索引 initialIndex
//             // this.move(this.getDistance());
//             this.getDistance(this.splitArrayByThreshold());

//             // 开启动画
//             if (this.options.animation) {
//                 this.openAnimation();
//             }

//             //自动切换
//             if (this.options.autoplay) {
//                 this.autoplay();
//             }
//         }

//         // 获取修正后的索引值
//         getCorrectedIndex(index) {
//             if (index < this.minIndex) return this.maxIndex;
//             if (index > this.maxIndex) return this.minIndex;

//             return index;
//         }

//         // 为每个 slider-item 设置宽度
//         setItemsWidth() {
//             for (const item of this.sliderItemEls) {
//                 // item.style.width = `${this.itemWidth}px`;
//                 item.style.width = item.offsetWidth + 'px';
//             }
//         }

//         // 为 slider-content 设置宽度
//         // setContentWidth() {
//         //     this.sliderContentEl.style.width = sliderItemEls.reduce((sum, item) => sum + item.setItemsWidth().width, 0);
//         // }
//         setContentWidth() {
//             const sliderItemElsArray = Array.from(this.sliderItemEls);
//             const sliderItemWidths = sliderItemElsArray.map(item => item.offsetWidth);
//             const sliderContentElWidth = sliderItemWidths.reduce((sum, width) => sum + width, 0);
//             //包括margin的总长度
//             this.sliderContentEl.style.width = sliderContentElWidth + this.sliderItemEls.length * 16 + 'px';
//         }

//         //不带动画的移动
//         move(distance) {
//             this.sliderContentEl.style.transform = `translateX(${distance}px)`;
//         }

//         //获取要移动的距离
//         splitArrayByThreshold() {
//             // console.log(index);
//             const sliderItemElsArray = Array.from(this.sliderItemEls);
//             const sliderItemWidths = sliderItemElsArray.map(item => item.offsetWidth);

//             let num = 0;
//             const result = [];
//             for (let i = 0; i < sliderItemWidths.length; i++) {
//                 num += sliderItemWidths[i] + 16;
//                 if (num >= 1149) {
//                     if (!(i == 1)) {
//                         result.push(-num);
//                     }
//                     num = 0;
//                 } else if (i == sliderItemWidths.length - 1 && num <= 1101) {
//                     result.push(-num);
//                 }
//             }
//             return result;
//         }
//         getDistance(result = this.splitArrayByThreshold(), index = this.currIndex) {
//             console.log(result);
//             return result[index];
//         }

//         //开启动画
//         openAnimation() {
//             this.sliderContentEl.classList.add(SLIDER_ANIMATION_CLASS_NAME);
//         }

//         //关闭动画
//         closeopenAnimation() {
//             this.setAniamtionSpeed(0);
//         }

//         //设置切换动画速度
//         setAniamtionSpeed(speed = this.options.speed) {
//             this.sliderContentEl.style.transitionDuration = `${speed}ms`;
//         }

//         //带动画移动
//         moveWithAnimation(distance) {
//             this.setAniamtionSpeed();
//             this.move(distance);

//             this.sliderContentEl.addEventListener("transitionend", () => {
//                 this.closeopenAnimation();
//             });
//         }

//         //自动切换
//         autoplay() {
//             const { autoplay } = this.options;

//             if (autoplay <= 0) return;

//             this.pause();

//             this.autoplayTimer = setInterval(() => {
//                 this.next();
//             }, autoplay);
//         }

//         //暂停自动切换
//         pause() {
//             clearInterval(this.autoplayTimer);
//         }

//         //切换下一张
//         next() {
//             this.to(this.currIndex + 1);
//         }

//         //切换上一张
//         prev() {
//             this.to(this.currIndex - 1);
//         }

//         //切换到对应索引的幻灯片
//         to(index) {
//             index = this.getCorrectedIndex(index);

//             if (this.currIndex === index) return;

//             this.currIndex = index;

//             const distance = this.getDistance();

//             if (this.options.animation) {
//                 this.moveWithAnimation(distance);
//             } else {
//                 this.move(distance);
//             }
//         }
//     }



//     // 继承基类
//     class Slider extends BaseSlider {
//         constructor(el, options) {
//             super(el, options);
//         }
//     }

//     const slider = new Slider(document.querySelector(".middle"), {
//         initialIndex: 0,
//         animation: true,
//         speed: 1000,

//     });

//     const leftBtn = document.querySelector(".left");
//     const rightBtn = document.querySelector(".right");
//     const banner = document.querySelector(".banner");

//     leftBtn.addEventListener(
//         "click",
//         () => {
//             slider.prev();
//         },
//         false
//     );
//     rightBtn.addEventListener(
//         "click",
//         () => {
//             slider.next();
//         },
//         false
//     );

//     banner.addEventListener("mouseenter", () => {
//         slider.pause();
//     });

//     banner.addEventListener("mouseleave", () => {
//         slider.autoplay();
//     });

// })